<h2 class="flex-row-space-between" style="margin-bottom: 0px;">{{'MALL_CENTER' |translate}} /
    {{'TASK_DASHBOARD'|translate}}</h2>
        <lib-factory [formId]="formId" [formInfo]="formInfo"></lib-factory>
<app-search (search)="doSearch($event)" [searchConfigs]="searchConfigs"></app-search>

<div class="mat-elevation-z8" style="margin-bottom: 20px;">
    <div class="table-container">
        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="updateTable($event)">
            <!-- Checkbox Column -->
            <ng-container matColumnDef="select">
                <th mat-header-cell *matHeaderCellDef>
                    <mat-checkbox (change)="$event ? masterToggle() : null"
                        [checked]="selection.hasValue() && isAllSelected()"
                        [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
                    </mat-checkbox>
                </th>
                <td mat-cell *matCellDef="let row">
                    <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
                        [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
                    </mat-checkbox>
                </td>
            </ng-container>

            <ng-container matColumnDef="id" sticky>
                <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'ID'|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    <app-copy-field [inputValue]="row.id"></app-copy-field>
                </td>
            </ng-container>

            <ng-container matColumnDef="referenceId">
                <th mat-header-cell *matHeaderCellDef>{{'REFERENCE_ID_TASK'|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    <app-copy-field [inputValue]="row.orderId"></app-copy-field>
                </td>
            </ng-container>

            <ng-container matColumnDef="taskStatus">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'TASK_STATUS'|translate}} </th>
                <td mat-cell *matCellDef="let row" style="padding-left: 8px;">
                    <ng-container *ngIf="row.status==='SUCCESS'">
                        <mat-icon [color]="'primary'">check_circle</mat-icon>
                    </ng-container>
                    <ng-container *ngIf="row.status==='RESOLVED'">
                        <mat-icon [color]="'accent'">lightbulb</mat-icon>
                    </ng-container>
                    <ng-container *ngIf="row.status==='STARTED'">
                        <mat-icon [color]="'accent'">hourglass_empty</mat-icon>
                    </ng-container>
                    <ng-container *ngIf="row.status==='PENDING'">
                        {{row.status |translate}}
                    </ng-container>
                </td>
            </ng-container>

            <ng-container *ngIf="isCancel" matColumnDef="resolveReason">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'RESOLVE_REASON'|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    {{row.resolveReason}} 
                </td>
            </ng-container>

            <ng-container matColumnDef="transactionId">
                <th mat-header-cell *matHeaderCellDef> {{'TRANSACTION_ID'|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    <app-copy-field [inputValue]="row.changeId"></app-copy-field>
                </td>
            </ng-container>

            <ng-container matColumnDef="hasCancel">
                <th mat-header-cell *matHeaderCellDef> {{'HAS_CANCEL'|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    <ng-container *ngIf="hasCancel(row)">
                        <mat-icon [color]="'accent'">check_circle</mat-icon>
                    </ng-container> 
                    <ng-container *ngIf="!hasCancel(row)">
                        <mat-icon [color]="'primary'">cancel</mat-icon>
                    </ng-container> 
                </td>
            </ng-container>

            <ng-container matColumnDef="cancelStatus">
                <th mat-header-cell *matHeaderCellDef> {{'CANCEL_STATUS'|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    <ng-container *ngIf="cancelStatus(row)==='SUCCESS'">
                        <mat-icon [color]="'primary'">check_circle</mat-icon>
                    </ng-container>
                    <ng-container *ngIf="cancelStatus(row)==='RESOLVED'">
                        <mat-icon [color]="'accent'">lightbulb</mat-icon>
                    </ng-container>
                    <ng-container *ngIf="cancelStatus(row)==='STARTED'">
                        <mat-icon [color]="'accent'">hourglass_empty</mat-icon>
                    </ng-container>
                    <ng-container *ngIf="cancelStatus(row)==='PENDING'">
                        {{row.status |translate}}
                    </ng-container>
                </td>
            </ng-container>

            <ng-container matColumnDef="createAt">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'CREATE_AT'|translate}}</th>
                <td mat-cell *matCellDef="let row">
                    {{row.createdAt|date:'M/d/yy, h:mm:ss a'}}
                </td>
            </ng-container>
            <ng-container *ngIf="!isCancel" matColumnDef="cancel">
                <th mat-header-cell *matHeaderCellDef class="table-icon">{{'CANCEL'|translate}}</th>
                <td mat-cell *matCellDef="let row" class="table-icon">
                    <ng-container *ngIf="cancelStatus(row)!=='SUCCESS'">
                        
                        <mat-icon (click)="doCancel(row.id)" [color]="'warn'">clear</mat-icon>
                    </ng-container>
                </td>
            </ng-container>
            <ng-container matColumnDef="retry">
                <th mat-header-cell *matHeaderCellDef class="table-icon">{{'DETAILS'|translate}}</th>
                <td mat-cell *matCellDef="let row" class="table-icon">
                    <mat-icon (click)="openBottomSheetExt(row)" [color]="'primary'">remove_red_eye</mat-icon>
                </td>
            </ng-container>
            <ng-container *ngIf="isCancel" matColumnDef="resolve">
                <th mat-header-cell *matHeaderCellDef class="table-icon">{{'RESOLVE'|translate}}</th>
                <td mat-cell *matCellDef="let row" class="table-icon">
                    <ng-container *ngIf="row.status==='STARTED'">
                        <mat-icon (click)="openResolveDialog(row.id)" [color]="'accent'">build</mat-icon>
                    </ng-container>
                </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
    </div>
    <mat-paginator [showFirstLastButtons]="true" [pageIndex]="entitySvc.pageNumber"
    [pageSize]="pageSize"
    [length]="totoalItemCount" (page)="pageHandler($event)"></mat-paginator>
</div>